<template>
  <div>
    <div class="filter">
      <div class="filter_item">
        楼层：<Select
          v-model="roomFloor"
          clearable
          style="width: 200px"
          @on-open-change="getRoomFloor"
          @on-change="getFloorChange"
        >
          <Option v-for="item in floors" :value="item" :key="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div class="filter_item">
        房号：<Select
          v-model="roomNumber"
          clearable
          style="width: 200px"
          @on-open-change="getRoomNumber"
          @on-change="getNumberChange"
        >
          <Option v-for="item in numbers" :value="item" :key="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div class="filter_item">
        住客名字：<Input
          v-model="userName"
          placeholder="请输入住客姓名"
          clearable
          style="width: 300px"
        />
      </div>
      <div class="filter_item">
        房间类型：<Select
          v-model="roomType"
          clearable
          style="width: 200px"
          @on-open-change="getRoomType"
          @on-change="getTypeChange"
        >
          <Option v-for="item in type" :value="item" :key="item">{{
            item
          }}</Option>
        </Select>
      </div>
      <div class="filter_item">
        床大小：
        <Select
          v-model="bed"
          clearable
          style="width: 200px"
          @on-open-change="getBed"
          @on-change="getBedChange"
        >
          <Option v-for="item in beds" :value="item" :key="item">{{
            item
          }}</Option>
        </Select>
      </div>

      <div class="filter_item">
        状态：
        <Select
          v-model="status"
          clearable
          style="width: 200px"
          @on-change="getStatusChange"
        >
          <Option
            v-for="item in statusList"
            :value="item.value"
            :key="item.key"
            >{{ item.value }}</Option
          >
        </Select>
      </div>
      <div class="filter_item">
        <Button type="primary" @click="getAllRoom">查询</Button>
      </div>
      <div class="filter_item">
        <Button type="error" @click="getAllRoom">新增</Button>
      </div>
      <div class="filter_item">
        <Modal
          v-model="showAddModel"
          title="新增"
          width="1300"
          :closable="false"
          :mask-closable="false"
        >
          <AddGuest ref="AddGuest" @on-close-modal="closeModal" />
          <div slot="footer">
            <Button @click="closeAddModal">取消</Button>
            <Button type="primary" @click="closeAddModal">确定</Button>
          </div>
        </Modal>

        <Modal
          v-model="showClearModel"
          title="退房"
          width="1300"
          :closable="false"
          :mask-closable="false"
        >
          <ClearRoom ref="ClearRoom" @on-close-modal="closeModel2" />
          <div slot="footer">
            <Button @click="closeClearModal">取消</Button>
            <Button type="primary" @click="closeClearModal">确定</Button>
          </div>
        </Modal>
        <Modal v-model="roomGuestShow" title="住客情况" width="900">
          <RoomGuest ref="RoomGuest" />
        </Modal>
        <div class="table">
          <Table
            ref="table"
            :columns="roomColumns"
            :data="roomList"
            border
          ></Table>
        </div>
        <div class="page">
          <Page :total="total" @on-change="pageChange" show-elevator />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import AddGuest from "../guest/AddGuest";
import ClearRoom from "./ClearRoom";
import axios from "axios";
import RoomGuest from "../guest/RoomGuest";
export default {
  name: "Room",
  components: {
    AddGuest,
    ClearRoom,
    RoomGuest,
  },
  data() {
    return {
      roomFloor: 0,
      floors: [],
      userName: "",
      roomNumber: 0,
      numbers: [],
      roomType: "",
      type: [],
      isBreakfast: "",
      bed: "",
      beds: [],
      roomSize: [],
      dayPrice: [],
      hourPrice: [],
      roomList: [],
      pageNo: 1,
      showClearModel: false,
      status: "",
      statusList: [
        {
          key: "空闲",
          value: "空闲",
        },
        {
          key: "待清洁",
          value: "待清洁",
        },
        {
          key: "已入住",
          value: "已入住",
        },
      ],
      showAddModel: false,
      roomColumns: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: 60,
        },
        {
          key: "roomFloor",
          title: "楼层",
          align: "center",
          width: 80,
        },
        {
          key: "roomNumber",
          title: "房号",
          align: "center",
        },
        {
          key: "roomType",
          title: "房间类型",
          align: "center",
        },
        {
          key: "isBreakfast",
          title: "是否有早餐",
          align: "center",
          render: (h, params) => {
            if (params.row.isBreakfast == 1) {
              return h(
                "div",
                {
                  style: {
                    color: "blue",
                  },
                },
                "有早餐"
              );
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "red",
                  },
                },
                "无早餐"
              );
            }
          },
        },
        {
          key: "bed",
          title: "床",
          align: "center",
        },
        {
          key: "roomSize",
          title: "房间大小",
          align: "center",
        },
        {
          key: "dayPrice",
          title: "日住价格",
          align: "center",
        },
        {
          key: "hourPrice",
          title: "钟点房价格",
          align: "center",
        },
        {
          title: "住客信息",
          align: "center",
          width:130,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small",
                },
                on: {
                  click: () => {
                    this.getGuestByRoom(params.row.roomNumber);
                  },
                },
              },
              "查看住客"
            );
          },
        },
        {
          key: "status",
          title: "状态",
          align: "center",
          render: (h, params) => {
            if (params.row.status == "待打扫") {
              return h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.updateStatus(params.row.roomNumber, "空闲");
                    },
                  },
                },
                params.row.status
              );
            } else {
              return h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      this.updateStatus(params.row.roomNumber, "空闲");
                    },
                  },
                },
                params.row.status
              );
            }
          },
        },
        {
          key: "choice",
          title: "选择",
          align: "center",
          render: (h, params) => {
            if (params.row.optionChoice == 1) {
              return h(
                "div",
                {
                  style: {
                    color: "blue",
                  },
                },
                "日住房"
              );
            } else if (params.row.optionChoice == 2) {
              return h(
                "div",
                {
                  style: {
                    color: "blue",
                  },
                },
                "钟点房"
              );
            } else {
              return h(
                "div",
                {
                  style: {
                    color: "black",
                  },
                },
                "无"
              );
            }
          },
        },
        {
          width: 130,
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.showAddModel = true;
                      this.$refs.AddGuest.roomNumber = params.row.roomNumber;
                    },
                  },
                },
                "入住"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.showClearModel = true;
                      this.$refs.ClearRoom.roomNumber = params.row.roomNumber;
                      this.$refs.ClearRoom.rzDate = params.row.rzDate;
                    },
                  },
                },
                "退房"
              ),
            ]);
          },
        },
      ],
      total: 0,
      roomGuestShow: false,
    };
  },
  methods: {
    getRoomFloor() {
      axios.post("/api/room/getRoomFloor", null).then((res) => {
        this.floors = res.data.data;
        console.log(this.floors);
      });
    },
    getRoomNumber() {
      axios
        .post("/api/room/getRoomNumber", {
          roomFloor: this.roomFloor,
        })
        .then((res) => {
          let data = res.data.data;
          this.numbers = data;
        });
    },
    getRoomType() {
      axios.post("/api/room/getRoomType").then((res) => {
        let data = res.data.data;
        this.type = data;
      });
    },
    getBed() {
      axios.post("/api/room/getRoomBed").then((res) => {
        let data = res.data.data;
        this.beds = data;
        console.log = this.beds;
      });
    },
    getFloorChange(e) {
      this.roomFloor = e;
    },
    getNumberChange(e) {
      this.roomNumber = e;
    },
    getBedChange(e) {
      this.bed = e;
    },
    getTypeChange(e) {
      this.roomType = e;
    },
    getStatusChange(e) {
      this.status = e;
    },
    pageChange(e) {
      this.pageNo = e;
      this.getAllRoom();
    },
    getAllRoom() {
      axios
        .post("/api/room/getAllRoom", {
          roomFloor: this.roomFloor,
          roomNumber: this.roomNumber,
          roomType: this.roomType ? this.roomType : null,
          status: this.status ? this.status : null,
          bed: this.bed ? this.bed : null,
          pageNo: this.pageNo,
        })
        .then((res) => {
          let pageList = res.data.data.pageList;
          this.$data.roomList = pageList;
          this.total = res.data.data.recordCount;
        });
    },
    closeAddModal() {
      this.showAddModel = false;
    },
    closeModal(e) {
      this.showAddModel = e;

      this.getAllRoom();
    },
    closeClearModal() {
      this.showClearModel = false;
    },
    closeModel2(e) {
      this.showClearModel = e;
      this.getAllRoom();
    },
    updateStatus(roomNumber, status) {
      axios
        .post("/api/room/updateRoomStatus", {
          roomNumber,
          status,
        })
        .then((res) => {
          this.getAllRoom();
        });
    },
    getGuestByRoom(roomNumber) {
      this.roomGuestShow = true;
      this.$refs.RoomGuest.getUserByRoom(roomNumber);
    },
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table {
  margin-top: 30px;
  width: 1260px;
}
.page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>